<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    </style>
    <script src="/zoom/hammer.min.js"></script>
    <script src="/zoom/hammer-time.min.js"></script>
    <script src="/zoom/hammer-zoom.js"></script>
</head>

<body>
    <div id="div">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    let baseX = 0
    let baseY = 0
    let width = window.innerWidth
    let height = window.innerHeight
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    // ctx.fillStyle = "#FF0000";
    // ctx.fillRect(0, 0, 150, 75);
    let image = new Image()
    image.src = '/zoom/img.png'
    image.onload = function() {
        canvas.width = width - 4
        canvas.height = image.height / image.width * canvas.width
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
        baseX = canvas.width / 2
        baseY = canvas.height / 2
    }
    let div = document.getElementById('div')
    let pic = new Zoom('#div');
    // div.addEventListener('touchstart', function(e) {
    //     // console.log('touchstart', e)
    //     let t = e.targetTouches[0]

    // })
    // div.addEventListener('touchmove', function(e) {
    //     console.log('touchmove', e)
    //     let t = e.targetTouches[0]
    // })
    // div.addEventListener('touchend', function(e) {
    //     console.log('touchend', e)
    // })

    pic.onPan = function(ev) {
        // console.log('ev', ev)
        // document.getElementById('sc').innerHTML = ev.scale
        if (ev.scale != 1)
            return
        let translateX = this.translateX || 0
        let translateY = this.translateY || 0
        let x = ev.center.x
        let y = ev.center.y
        ctx.fillStyle = "#FF0000";
        let scale = this.scale

        let newBaseX = baseX + translateX
        let newBaseY = baseY + translateY
        let lX = ((x - newBaseX) / scale + newBaseX) - translateX
        let lY = ((y - newBaseY) / scale + newBaseY) - translateY

        if (ev.type == 'panstart') {
            ctx.lineWidth = 5
            ctx.beginPath();
            ctx.moveTo(lX, lY);
        };
        if (ev.type == 'panmove') {
            ctx.lineTo(lX, lY);
            ctx.stroke();
        };
    }
    pic.init();
    </script>
</body>

</html>